<template>
	<view>
		<view class="keyboard-head">
			<view class="title h3">
				{{ title }}
			</view>
			<view class="title p">
				{{ subtitle }}
			</view>
		</view>
		<form class="cu-form" @submit="formSubmit">
			<view class="cu-form-group cai-input-default form-group-code">
				<input type="text" value="" placeholder="请输入手机号" />
			</view>
			<view class="uni-btn-v mt-20">
				<button class="clickC cai-button-primary cai-font-bold" form-type="submit">
					{{ btnText }}
				</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginLoading: false,
				isPhone: 1,
				title: '',
				subtitle: '',
				btnText: '',
				urlQuery: ''
			};
		},
		onLoad(query) {
			this.urlQuery = query; 
		},
		mounted() {
			if(this.urlQuery.isPhone == '1'){
				this.title = '请输入原手机号码';
				this.subtitle = '通过安全环境检测可以更换手机号码';
				this.btnText = '下一步';
			}else if(this.urlQuery.isPhone == '2'){
				this.title = '请输入新手机号码';
				this.subtitle = '更换新手机号码后，请用新手机号码登录';
				this.btnText = '获取短信验证码';
			}
		},
		methods: {
			formSubmit(e) {
				if(this.urlQuery.isPhone == '1'){
					uni.navigateTo({
						url:'/pages/my/setPwd/phone?isPhone=2'
					})
				}if(this.urlQuery.isPhone == '2'){
					uni.navigateTo({
						url:'/pages/my/setPwd/yzcode?phoneNo=13566456453'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.keyboard-head{
		padding-left: 30rpx;
		margin-top: 60rpx;
		margin-bottom: 50rpx;
		.h3{
			font-size: 50rpx;
			color: #333;
			font-weight: bold;
			text-align: left;
		}
		.p{
			text-align: left;
			font-size: ($font-size-base);
			color: #999;
		}
	}
	.cu-form{
		margin: 0 30rpx;
		overflow: hidden;
		display: block;
		.form-group-phone{
			border-radius: ($border-radius-box);
		}
		.form-group-code{
			border-radius: ($border-radius-box);
			position: relative;
		}
		.cai-button-primary{
			background-color: ($cor);
			border: none;
			color: #fff;
			border-radius: 50rpx;
			height: 104rpx;
			line-height: 104rpx;
			font-weight: bold;
			&:active{
				opacity: .7;
			}
		}
	}
</style>
